<template>
  <Form :model="model">
    <!-- 名称 -->
    <Form.Item label="名称">
      <Input v-model:value="model.name" :disabled="!isAddTableRelationship" placeholder="请输入关联名称" />
    </Form.Item>

    <!-- 关联结果 -->
    <Form.Item label="关联结果">
      <Select v-model:value="model.type" :disabled="!isAddTableRelationship"  placeholder="请选择关联结果">
        <Select.Option value="object">object</Select.Option>
        <Select.Option value="array">array</Select.Option>
      </Select>
    </Form.Item>

    <!-- 来源表 -->
    <Form.Item label="来源表">
      <Input
        disabled
        placeholder="请输入源表"
        :value="
          sourceTable.name + (sourceTable.comment ? ' - ' + sourceTable.comment : '')
        "
      />
    </Form.Item>

    <!-- 目标表 -->
    <Form.Item label="目标表">
      <Select
        v-model:value="model.targetTable"
        :disabled="!isAddTableRelationship"
        @change="onTargetTableChange"
        placeholder="请选择目标表"
      >
        <Select.Option v-for="item in tableList" :key="item.name" :value="item.name">
          {{ item.name + (item.comment ? " - " + item.comment : "") }}
        </Select.Option>
      </Select>
    </Form.Item>

    <!-- 新增关联关系 -->
    <Form.Item>
      <Button type="primary" @click="onAddRelationshipField">新增关联关系</Button>
    </Form.Item>

    <!-- 关联关系编辑 -->
    <Form.Item label="">
      <Table
        size="small"
        :columns="columns"
        :data-source="model.relationships"
        :pagination="false"
      >
        <template #bodyCell="{ column, index, record }">
          <!-- 删除操作 -->
          <template v-if="column.dataIndex === 'operations'">
            <a @click="onDeleteRelationshipField(index)">删除</a>
          </template>

          <!-- 源字段 -->
          <template v-else-if="column.dataIndex === 'sourceTableField'">
            <Select v-model:value="record.sourceTableField" style="width: 100%;" placeholder="请选择源字段">
              <Select.Option
                v-for="field in sourceFields"
                :key="field.name"
                :value="field.name"
              >
                {{ field.name + (field.comment ? " - " + field.comment : "") }}
              </Select.Option>
            </Select>
          </template>

          <!-- 目标字段 -->
          <template v-else-if="column.dataIndex === 'targetTableField'">
            <Select v-model:value="record.targetTableField" style="width: 100%;" placeholder="请选择目标字段">
              <Select.Option
                v-for="field in targetFields"
                :key="field.name"
                :value="field.name"
              >
                {{ field.name + (field.comment ? " - " + field.comment : "") }}
              </Select.Option>
            </Select>
          </template>
        </template>
      </Table>
    </Form.Item>
  </Form>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import { Button, Form, Input, Select, Table } from "ant-design-vue";

const props = defineProps({
  isAddTableRelationship: { type: Boolean, required: true }, // 是否是添加关联
  model: { type: Object, required: true }, // 表单数据
  sourceTable: { type: Object, required: true }, // 源表对象
  tableList: { type: Array, required: true }, // 所有表列表
  sourceFields: { type: Array, required: true }, // 源表字段
  targetFields: { type: Array, required: true }, // 目标表字段
  columns: { type: Array, required: true }, // 表格列配置
});

const emit = defineEmits([
  "addRelationshipField",
  "deleteRelationshipField",
  "targetTableChange",
]);

// 新增关联关系
const onAddRelationshipField = () => {
  emit("addRelationshipField");
};

// 删除关联关系
const onDeleteRelationshipField = (key) => {
  emit("deleteRelationshipField", key);
};

// 目标表更改事件
const onTargetTableChange = (value) => {
  emit("targetTableChange", value);
};
</script>
